<template>
	<div class="employee-dep-management">
		<div class="system-content">
			<!-- 左边导航栏 -->
			<div 
				v-loading="depLoading" 
				class="system-view-nav">
				<el-tree 
					ref="tree" 
					:data="treeData" 
					:expand-on-click-node="false" 
					node-key="id" 
					default-expand-all
					highlight-current 
					@node-click="changeDepClick">
					<flexbox 
						slot-scope="{ node, data }" 
						class="node-data">
						<img 
							v-if="node.expanded" 
							class="node-img" 
							src="@/assets/img/fold.png"
							@click="handleExpand('close',node, data)">
						<img 
							v-if="!node.expanded" 
							class="node-img" 
							src="@/assets/img/unfold.png"
							@click="handleExpand('open',node, data)">
						<div class="node-label">{{ node.label }}</div>
						<div class="node-label-set">
							<el-button 
								v-if="strucSaveAuth" 
								type="text" 
								size="mini" 
								@click.stop="() => append(data)">
								<i class="el-icon-plus" />
							</el-button>
							<el-button 
								v-if="strucUpdateAuth" 
								type="text" 
								size="mini"
								@click.stop="() => edit(node, data)">
								<i class="el-icon-edit" />
							</el-button>
							<el-button 
								v-if="strucDeleteAuth" 
								type="text" 
								size="mini"
								@click.stop="() => remove(node, data)">
								<i class="el-icon-close" />
							</el-button>
						</div>
					</flexbox>
				</el-tree>
			</div>
			<!-- 右边内容 -->
			<div class="system-view-table flex-index">
				<div 
					v-if="selectionList.length === 0" 
					class="table-top1">
					<div class="icon-search lt">
						<el-input 
							size="mini" 
							v-model="importInput" 
							placeholder="请输入员工名称"
							@keyup.enter.native="searchClick" />
						<i 
							class="el-icon-search" 
							@click="searchClick" />
					</div>
					<div class="status">
						<span>状态</span>
						<el-select 
							size="mini" 
							v-model="selectModel" 
							:clearable="true" 
							placeholder="请选择"
							@change="statusChange">
							<el-option 
								v-for="item in statusOptions" 
								:key="item.value" 
								:label="item.label"
								:value="item.value" />
						</el-select>
					</div>
					<div class="status">
						<span>角色</span>
						<el-select 
							size="mini" 
							v-model="selectModel1" 
							:clearable="true" 
							placeholder="请选择"
							@change="roleChange">
							<el-option 
								v-for="item in optionsList['group_id'].list" 
								:key="item.id" 
								:label="item.title"
								:value="item.id" />
						</el-select>
					</div>

					<div class="status rt">
						<el-button 
							v-if="userSaveAuth" 
							type="primary" 
							size="mini" 
							@click="newBtn">新建员工</el-button>
					</div>
				</div>
				<flexbox 
					v-if="selectionList.length > 0" 
					class="selection-bar">
					<div class="selected—title">
						已选中
						<span class="selected—count">{{ selectionList.length }}</span>项
					</div>
					<flexbox class="selection-items-box">
						<flexbox 
							v-for="(item, index) in selectionInfo" 
							:key="index" 
							class="selection-item"
							@click.native="selectionBarClick(item.type)">
							<img 
								:src="item.icon" 
								class="selection-item-icon">
							<div class="selection-item-name">{{ item.name }}</div>
						</flexbox>
					</flexbox>
				</flexbox>
				<div 
					class="flex-box" 
					style="margin-top: 10px;">
					<el-table 
						v-loading="loading" 
						id="depTable" 
						:data="tableData" 
						:height="tableHeight" 
						border 
						stripe
						fit 
						size="mini" 
						@selection-change="handleSelectionChange" 
						@row-click="rowClick">
						<el-table-column 
							type="selection" 
							align="center" 
							width="55" />
						</el-table-column>
						<el-table-column 
							align="center" 
							label="用户名" 
							show-overflow-tooltip 
							width="180">
							<template slot-scope="scope">
								<div class="status-name">
									<div 
										:style="{'background-color' : getStatusColor(scope.row.status)}" />
									{{ scope.row.username }}
								</div>
							</template>
						</el-table-column>
						<el-table-column 
							prop="mobile" 
							label="手机" 
							align="center" 
							show-overflow-tooltip 
							width="180">
						</el-table-column>
						<el-table-column 
							prop="department" 
							label="部门" 
							align="center" 
							show-overflow-tooltip 
							width="180">
						</el-table-column>
						<el-table-column 
							prop="roles" 
							label="角色" 
							align="center" 
							show-overflow-tooltip 
							width="180">
						</el-table-column>
						<el-table-column 
							prop="status" 
							label="状态" 
							align="center" 
							width="180">
							<template slot-scope="scope">
								{{scope.row.status == 1 ? '启用' : '禁用'}}
							</template>
						</el-table-column>
						<el-table-column 
							label="注册时间" 
							align="center" 
							show-overflow-tooltip 
							width="180">
							<template slot-scope="scope">
								{{scope.row.create_time | filterTimestampToFormatTime()}}
							</template>
						</el-table-column>
						<el-table-column
							prop="last_login_time"
							label="上一次登录时间"
							show-overflow-tooltip
							align="center" 
							width="180">
							<template slot-scope="scope">
								{{scope.row.last_login_time | filterTimestampToFormatTime()}}
							</template>
						</el-table-column>
						<el-table-column 
							fixed="right" 
							label="操作" 
							align="center" 
							min-width="250">
							<template slot-scope="scope">
								<el-button
									size="mini"
									plain
									type="primary"
									@click="editBtn(scope.row)">编辑</el-button>
								<el-button
									size="mini"
									plain
									type="warning"
									@click="resetPasswordVisible = true">重置密码</el-button>
								<el-button
									v-if="scope.row.status == 1"
									size="mini"
									plain
									type="danger"
									@click="handleAction('close',scope.row.id)">禁用</el-button>
								<el-button
									v-else
									size="mini"
									plain
									type="primary"
									@click="handleAction('open',scope.row.id)">启用</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="p-contianer">
						<div class="status-des">
							<div 
								v-for="item in statusOptions" 
								:key="item.value" 
								class="status-des-item">
								<div :style="{'background-color' : getStatusColor(item.value)}" />
								{{ item.label }}
							</div>
						</div>
						<el-pagination 
							:current-page="currentPage" 
							:page-sizes="pageSizes" 
							:page-size.sync="pageSize"
							:total="total" 
							class="p-bar" 
							layout="total, sizes, prev, pager, next, jumper"
							@size-change="handleSizeChange" 
							@current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
		
		
		<!-- 导航新增编辑弹出框 -->
		<el-dialog 
			:visible.sync="depCreateDialog" 
			:title="navBtnTitle" 
			:before-close="navHandleClose" 
			width="30%">
			<div class="nav-dialog-div">
				<label>{{ labelName }}：</label>
				<el-input 
					v-model="treeInput" 
					placeholder="请输入内容" />
			</div>
			<div 
				v-if="depSelect != 0" 
				class="nav-dialog-div">
				<label>上级部门：</label>
				<el-select 
					v-model="depSelect" 
					:clearable="false" 
					placeholder="请选择">
					<el-option 
						v-for="item in dialogOptions" 
						:key="item.id" 
						:label="item.name" 
						:value="item.id" />
				</el-select>
			</div>
			<span 
				slot="footer" 
				class="dialog-footer">
				<el-button 
					@click="depCreateDialog = false" 
					size="mini">取 消</el-button>
				<el-button 
					type="primary" 
					@click="submitDialog" 
					size="mini">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 新建和编辑 -->
		<el-dialog 
			v-loading="loading" 
			v-if="employeeCreateDialog" 
			:title="dialogTitle"
			:visible.sync="employeeCreateDialog" 
			:close-on-click-modal="false" 
			:popper-append-to-body="false"
			:append-to-body="true" 
			:before-close="newHandleClose" 
			width="650px">
			<p class="new-dialog-title">基本信息</p>
			<el-form 
				ref="dialogRef" 
				:inline="true" 
				:model="formInline" 
				:rules="dialogRules" 
				class="new-dialog-form"
				label-width="80px" 
				label-position="top">
				<!-- 用户名 密码 手机号 部门 角色 -->
				<el-col 
					v-for="(item,index) in addFormList" 
					:key="index" 
					:span="11">
					<el-form-item 
						:label="item.label" 
						:prop="item.field_name">

						<!-- 普通文本框 -->
						<template v-if="item.type == 'text'">
							<el-input 
								type="text" 
								v-model="formInline[item.field_name]" 
								:placeholder="'请输入'+item.label"
								class="forminput">
							</el-input>
						</template>

						<!-- select单选框 -->
						<template v-if="item.type == 'select'">
							<el-select 
								v-model="formInline[item.field_name]" 
								filterable class="forminput">
								<el-option 
									v-for="(fieldItem,fieldIndex) in optionsList[item.field_name].list"
									:key="fieldIndex" 
									:label="fieldItem.name"
									:value="fieldItem.structure_id ? fieldItem.structure_id : fieldItem.id ">
								</el-option>
							</el-select>
						</template>

						<!-- select多选框 -->
						<template 
							v-if="item.type == 'select-multiple'">
							<el-select 
								v-model="formInline[item.field_name]" 
								filterable 
								multiple 
								class="forminput">
								<el-option 
									v-for="(fieldItem,fieldIndex) in optionsList['group_id'].list"
									:key="fieldItem.id" 
									:label="fieldItem.title" 
									:value="fieldItem.id">
								</el-option>
							</el-select>
						</template>

						<template v-if="item.type == 'select-m'">
							<el-select 
								v-model="formInline[item.field_name]" 
								filterable multiple 
								class="forminput">
								<el-option 
									v-for="(fieldItem,fieldIndex) in optionsList['parent_id'].list"
									:key="fieldItem.id" 
									:label="fieldItem.name" 
									:value="fieldItem.id">
								</el-option>
							</el-select>
						</template>
						
						<template v-if="item.type == 'select-d'">
							<crm-relative-cell
								:value="relationInfo.value"
								:index="0"
								:item="relationInfo"
								crm-type="hr"
								:radio="true"
								:disabled="relationInfo.disabled"
								@value-change="fieldValueChange"/>
						</template>

					</el-form-item>
				</el-col>
			</el-form>
			<span 
				slot="footer" 
				class="dialog-footer">
				<el-button 
					size="mini" 
					type="primary" 
					@click="newDialogSubmit">保 存</el-button>
				<el-button 
					size="mini" 
					@click="newHandleClose">取 消</el-button>
			</span>
		</el-dialog>

		<!-- 重置密码 -->
		<el-dialog 
			v-loading="loading" 
			:visible.sync="resetPasswordVisible" 
			:close-on-click-modal="false"
			:modal-append-to-body="false" 
			:before-close="resetPasswordClose" 
			title="重置密码" 
			width="30%">
			<div class="el-password">
				<el-form 
					ref="passForm" 
					:model="passForm" 
					:rules="rules">
					<el-form-item 
						label="密码" 
						prop="new_pwd">
						<el-input 
							show-password 
							v-model="passForm.password" 
							type="password" />
					</el-form-item>
				</el-form>
			</div>
			<span 
				slot="footer" 
				class="dialog-footer">
				<el-button 
					size="mini" 
					@click="resetPasswordClose">取 消</el-button>
				<el-button 
					type="primary" 
					size="mini" 
					@click="passSubmit(passForm)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 设置直属上级 -->
		<el-dialog 
			:visible.sync="setleaderVisible" 
			:close-on-click-modal="false" 
			:modal-append-to-body="false"
			:before-close="setleaderClose" 
			title="设置直属上级" 
			width="30%">
			<div class="el-password">
				<el-form 
					ref="passForm" 
					:model="postleaderData">
					<el-form-item label="直属上级">
						<el-select 
							v-model="postleaderData.parent_ids" 
							filterable multiple 
							class="forminput">
							<el-option 
								v-for="(fieldItem,fieldIndex) in optionsList['parent_id'].list"
								:key="fieldItem.id" 
								:label="fieldItem.name" 
								:value="fieldItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button 
					size="mini" 
					@click="setleaderClose">取 消</el-button>
				<el-button 
					type="primary" 
					size="mini" 
					@click="setleader(postleaderData)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 修改部门 -->
		<el-dialog 
			:visible.sync="setdepVisible" 
			:close-on-click-modal="false" 
			:modal-append-to-body="false"
			:before-close="setdepClose" 
			title="修改部门" 
			width="30%">
			<div class="el-password">
				<el-form 
					ref="passForm" 
					:model="postleaderData">
					<el-form-item label="部门">
						<el-select 
							v-model="postleaderData.position_ids" 
							filterable 
							class="forminput">
							<el-option 
								v-for="(fieldItem,fieldIndex) in optionsList['structure_id'].list"
								:key="fieldItem.id" 
								:label="fieldItem.name" 
								:value="fieldItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span 
				slot="footer" 
				class="dialog-footer">
				<el-button 
					size="mini" 
					@click="setdepClose">取 消</el-button>
				<el-button 
					type="primary" 
					size="mini" 
					@click="setdep(postleaderData)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 修改角色 -->
		<el-dialog 
			:visible.sync="setroleVisible" 
			:close-on-click-modal="false" 
			:modal-append-to-body="false"
			:before-close="setroleClose" 
			title="修改角色" 
			width="30%">
			<div class="el-password">
				<el-form 
					ref="passForm" 
					:model="postleaderData">
					<el-form-item label="角色">
						<el-select 
							v-model="postleaderData.group_id" 
							filterable multiple 
							class="forminput">
							<el-option 
								v-for="(fieldItem,fieldIndex) in optionsList['group_id'].list" 
								:key="fieldItem.id"
								:label="fieldItem.title" 
								:value="fieldItem.id">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<span 
				slot="footer" 
				class="dialog-footer">
				<el-button 
					size="mini" 
					@click="setroleClose">取 消</el-button>
				<el-button 
					type="primary" 
					size="mini" 
					@click="setrole(postleaderData)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	
	import {
		mapGetters
	} from 'vuex'
	import {
		depTreeList,
		adminStructuresListDialog,
		depSave,
		depEdit,
		depDelete,
		adminUsersIndex,
		getRoleauthList,
		usersAdd,
		usersUpdate,
		resetPassword,
		disable,
		enables,
		setLeaderrequest,
		setDeprequest,
		setRolerequest
	} from '@/api/setting/setting'
	import Lockr from 'lockr'
	export default {
		data() {
			return {
				navBtnTitle: '新建',
				depCreateDialog: false, // 控制部门新增 编辑 数据
				depLoading: false, // 左侧部门loading效果
				treeData: [],
				depSelect: '',
				labelName: '',
				treeInput: '',
				dialogOptions: [],
				// 编辑部门时id
				treeEditId: '',
				optionsList: {
					structure_id: {
						field: 'structure_id',
						list: []
					},
					group_id: {
						field: 'group_id',
						list: []
					},
					parent_id: {
						field: 'parent_id',
						list: []
					},
				},
				// 列表
				loading: false, // 表的加载动画
				statusOptions: [{
						value: '1',
						label: '激活'
					},
					{
						value: '2',
						label: '禁用'
					}
				],
				selectModel: '', // 状态值 用于筛选
				selectModel1: '', // 角色值 用于筛选
				selectionList: [], // 批量勾选数据
				importInput: '', // 搜索
				search_field: '',
				search_type: '',


				/** 分页逻辑 */
				structureValue: '', // 左侧列表选中的值 用于筛选
				currentPage: 1,
				pageSize: 15,
				pageSizes: [15, 30, 45, 60, 200],
				total: 0,
				/** ** */
				// 新建和编辑
				employeeCreateDialog: false,
				dialogTitle: '新建员工',
				formInline: {},
				tableData: [],
				tableHeight: document.documentElement.clientHeight - 200,
				dialogData: {},

				dialogRules: {
					username: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						},
						{
							min: 6,
							message: '长度至少为6个字符',
							trigger: 'blur'
						}
					],
					mobile: [{
						pattern: /^1\d{10}/,
						message: '目前只支持中国大陆的手机号码',
						trigger: 'blur'
					}],
					structure_id: [{
						required: true,
						message: '部门不能为空',
						trigger: 'change'
					}],
					group_ids: [{
						required: true,
						message: '角色不能为空',
						trigger: 'change'
					}]
				},

				addFormList: [{
						field_name: 'username',
						label: '用户名',
						type: 'text'
					},
					{
						field_name: 'password',
						label: '密码',
						type: 'text'
					},
					{
						field_name: 'mobile',
						label: '手机号',
						type: 'text'
					},
					{
						field_name: 'structure_id',
						label: '部门',
						type: 'select'
					},
					{
						field_name: 'group_ids',
						label: '角色',
						type: 'select-multiple'
					},
					{
						field_name: 'parent_ids',
						label: '直属上级',
						type: 'select-m'
					}
				],
				formData: {},
				// 重置密码
				resetPasswordVisible: false,
				rules: {
					password: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 12,
							message: '长度在 6 到 12 个字符',
							trigger: 'blur'
						}
					]
				},
				passForm: {"password":""},
				// 直属上级
				setleaderVisible: false,
				setdepVisible: false,
				setroleVisible: false,
				postleaderData: {},
				
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
				hr_id:0,
				/** 控制详情展示 */
				rowID: '', // 行信息
				rowType: '', // 详情类型
				showDview: false,
			}
		},
		components: {
			CrmRelativeCell
		},
		mounted() {
			/** 控制table的高度 */
			window.onresize = () => {
				this.tableHeight = document.documentElement.clientHeight - 200
			}

			// 部门树形列表
			this.treeListFun()
			this.usersListFun()
			this.getSelectUserList() // 直属上级列表

			// 角色列表
			getRoleauthList().then(res => {
				this.optionsList['group_id'].list = res.data
			})
			// document.getElementsByClassName('el-select-dropdown')[0].style.color = 'red'
		},
		computed: {
			...mapGetters(['allAuth', 'userInfo']),

			// 部门新增权限
			strucSaveAuth() {
				return this.userInfo.group_id.includes(1)
			},

			// 部门编辑权限
			strucUpdateAuth() {
				return this.userInfo.group_id.includes(1)
			},
			// 部门删除权限
			strucDeleteAuth() {
				return this.userInfo.group_id.includes(1)
			},
			// 新增员工
			userSaveAuth() {
				return this.userInfo.group_id.includes(1)
			},

			selectionInfo: function() {
				let temps = []
				if (this.userInfo.group_id.includes(1)) {
					temps = [{
							name: '禁用',
							type: 'lock',
							icon: require('@/assets/img/selection_disable.png')
						},
						{
							name: '激活',
							type: 'unlock',
							icon: require('@/assets/img/selection_start.png')
						},
						{
							name: '重置密码',
							type: 'reset',
							icon: require('@/assets/img/selection_reset.png')
						},
						{
							name: '设置直属上级',
							type: 'setleader',
							icon: require('@/assets/img/selection_alloc.png')
						},
						{
							name: '修改部门',
							type: 'setdep',
							icon: require('@/assets/img/selection_start.png')
						},
						{
							name: '修改角色',
							type: 'setrole',
							icon: require('@/assets/img/selection_reset.png')
						}
					]
				}

				return temps
			},
		},
		methods: {
			// 改变部门
			changeDepClick(data) {
				this.currentPage = 1
				this.structureValue = data.id
				this.usersListFun()
			},

			/**
			 * 展开闭合操作
			 */
			handleExpand(type, node, data) {
				if (type == 'close') {
					if (data.children) {
						node.expanded = false
					}
				} else if (type == 'open') {
					node.expanded = true
				}
			},

			// 获取树形列表
			treeListFun() {
				this.depLoading = true
				depTreeList().then(response => {
						this.treeData = response.data
						this.depLoading = false
					})
					.catch(() => {
						this.depLoading = false
					})
			},

			// 部门非树形结构列表 用于部门添加
			getDepList() {
				adminStructuresListDialog().then(response => {
					this.optionsList['structure_id'].list = response.data
				})
			},

			// 新增部门
			append(data) {
				this.treeInput = ''
				this.labelName = '新增部门'
				this.navBtnTitle = '新增部门'
				this.depSelect = data.id
				this.getStructuresListBySuperior({
					id: data.id,
					type: 'save'
				})
				this.depCreateDialog = true
			},

			// 获取新增部门 上级部门信息
			getStructuresListBySuperior(data) {
				this.dialogOptions = []
				adminStructuresListDialog(data).then(response => {
					this.dialogOptions = response.data
				})
			},

			// 编辑组织架构
			edit(node, data) {
				this.treeInput = data.label
				this.treeEditId = data.id
				this.depSelect = data.pid
				this.navBtnTitle = '编辑部门'
				this.labelName = '编辑部门'
				this.getStructuresListBySuperior({
					id: data.id,
					type: 'update'
				})
				this.depCreateDialog = true
			},

			// 删除组织架构
			remove(node, data) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					depDelete({
							id: data.id
						})
						.then(res => {
							this.treeListFun()
							this.$message.success('删除成功')
							this.loading = false
						})
						.catch(() => {
							this.loading = false
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
			},

			// 关闭新增或编辑
			navHandleClose() {
				this.depCreateDialog = false
			},

			// 新增或编辑确定按钮
			submitDialog() {
				if (this.labelName == '新增部门') {
					depSave({
						name: this.treeInput,
						pid: this.depSelect,
					}).then(res => {
						this.getDepList() // 增加了新部门 刷新数据
						this.treeListFun()
						this.navHandleClose()
						this.$message.success(res.data)
					})
				} else {
					depEdit({
						name: this.treeInput,
						id: this.treeEditId,
						pid: this.depSelect
					}).then(res => {
						this.treeListFun()
						this.navHandleClose()
						this.$message.success(res.data)
					})
				}
			},

			// 搜索框
			searchClick() {
				this.currentPage = 1
				this.search_field = 'name'
				this.search_type = 'text'
				this.usersListFun()
			},

			// 状态筛选
			statusChange() {
				this.currentPage = 1
				this.search_field = 'status'
				this.search_type = 'status'
				this.usersListFun()
			},

			// 角色筛选
			roleChange() {
				this.currentPage = 1
				this.search_field = 'role'
				this.search_type = 'role'
				this.usersListFun()
			},

			// 新建用户
			newBtn() {
				this.addFormList = [{
						field_name: 'username',
						label: '用户名',
						type: 'text'
					},
					{
						field_name: 'password',
						label: '密码',
						type: 'text'
					},
					{
						field_name: 'mobile',
						label: '手机号',
						type: 'text'
					},
					{
						field_name: 'structure_id',
						label: '部门',
						type: 'select'
					},
					{
						field_name: 'group_ids',
						label: '角色',
						type: 'select-multiple'
					},
					{
						field_name: 'parent_ids',
						label: '直属上级',
						type: 'select-m'
					}
				]
				this.employeeCreateDialog = true
				this.dialogTitle = '新建员工'
				this.getDepList()
				// 角色列表
				getRoleauthList().then(res => {
					this.optionsList['group_id'].list = res.data
				})
				// 防止打开弹窗就触发验证
				this.formInline = {
					group_ids: []
				}
			},

			// 编辑用户
			editBtn(row) {
				this.dialogTitle = '编辑员工'
				let obj = JSON.parse(JSON.stringify(row))
				this.getDepList()
				// 角色列表
				getRoleauthList().then(res => {
					this.optionsList['group_id'].list = res.data
				})
				// 去掉密码框
				this.addFormList = [{
						field_name: 'username',
						label: '用户名',
						type: 'text'
					},
					{
						field_name: 'mobile',
						label: '手机号',
						type: 'text'
					},
					{
						field_name: 'structure_id',
						label: '部门',
						type: 'select'
					},
					{
						field_name: 'group_ids',
						label: '角色',
						type: 'select-multiple'
					},
					{
						field_name: 'parent_ids',
						label: '直属上级',
						type: 'select-m'
					}
				]
				// 角色变成数组形式
				this.$set(obj, 'group_ids', obj.roleids ? obj.roleids.split(',').map(function(item, index, array) {
					return parseInt(item)
				}) : "")

				this.$set(obj, 'structure_id', obj.structure_id)
				if (obj.parent_id != '') {
					this.$set(obj, 'parent_ids', obj.parent_id.split(',').map(function(item, index, array) {
						return parseInt(item)
					}))
					this.$set(obj, 'parent_id', obj.parent_id.split(',').map(function(item, index, array) {
						return parseInt(item)
					}))
				}
				
				
				
				this.formInline = obj
				this.employeeCreateDialog = true
			},

			// 更改每页展示数量
			handleSizeChange(val) {
				this.pageSize = val
				this.usersListFun()
			},

			// 更改当前页数
			handleCurrentChange(val) {
				this.currentPage = val
				this.usersListFun()
			},

			// 勾选
			handleSelectionChange(val) {
				this.selectionList = val // 勾选的行
			},

			// 第一列点击事件
			rowClick(row, column, event) {
				this.dialogData = row
			},

			// 用户列表
			usersListFun() {
				this.loading = true
				var params = {
					page: this.currentPage,
					limit: this.pageSize,
					search_v: this.importInput,
					search_t: this.search_type,
					search_f: this.search_field
				}
				if (this.structureValue) {
					params.position = this.structureValue
				}
				if (this.selectModel) {
					params.search_v = this.selectModel
				}

				if (this.selectModel1) {
					params.search_v = this.selectModel1
				}
				adminUsersIndex(params)
					.then(res => {
						this.tableData = res.data.list.map((item, index, array) => {
							return item
						})
						this.total = res.data.count
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			/** 获取选择直属上级列表 */
			getSelectUserList() {
				this.loading = true
				adminUsersIndex({
						type: 1
					})
					.then(res => {
						this.optionsList['parent_id'].list = []
						for (const i of res.data.list) {
							this.optionsList['parent_id'].list.push({
								id: i.id,
								name: i.username
							})
						}
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 获取状态颜色
			getStatusColor(status) {
				if (status == 2) {
					return '#FF6767'
				} else if (status == 1) {
					return '#46CDCF'
				}
			},

			// 新建和编辑
			newHandleClose() {
				this.employeeCreateDialog = false
				this.formInline = []
				
				// 档案资料
				this.relationInfo.value = []
				this.hr_id = 0
			},

			// 用户新建
			newDialogSubmit() {
				this.$refs.dialogRef.validate(valid => {
					if (valid) {
						if (this.dialogTitle == '新建员工') {
							this.loading = true
							usersAdd(this.formInline)
								.then(res => {
									this.$message.success('新增成功')
									this.employeeCreateDialog = false
									this.usersListFun()
									this.getSelectUserList()
									this.loading = false
								})
								.catch(() => {
									this.loading = false
								})
						} else {
							this.loading = true
							usersUpdate(this.formInline)
								.then(res => {
									if (this.employeeDetailDialog) {
										this.employeeDetailDialog = false
									}
									this.employeeCreateDialog = false
									this.$message.success('编辑成功')
									this.usersListFun()
									this.getSelectUserList()
									this.loading = false
								})
								.catch(() => {
									this.loading = false
								})
						}
					} else {
						return false
					}
				})
			},

			// 重置密码 -- 关闭按钮
			resetPasswordClose() {
				this.resetPasswordVisible = false
				this.passForm.password = ''
			},

			// 重置密码 -- 确定按钮
			passSubmit(val) {
				var ids = []
				if (this.selectionList.length > 0) {
					ids = this.selectionList.map(function(item, index, array) {
						return item.id
					})
				} else {
					ids = [this.dialogData.id]
				}
				val.id = ids
				this.loading = true
				resetPassword(val)
					.then(res => {
						this.$message.success('重置成功')
						this.resetPasswordClose()
						this.usersListFun()
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 设置直属上级
			setleader(val) {
				var ids = []
				if (!this.selectionList.length) return this.$message.error('请选择用户')
				ids = this.selectionList.map(function(item, index, array) {
					return item.id
				})
				val["id"] = ids
				val["parent_id"] = val.parent_ids
				this.loading = true
				setLeaderrequest(val)
					.then(res => {
						this.$message.success('设置成功')
						this.setleaderClose()
						this.usersListFun()
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 修改部门
			setdep(val) {
				var ids = []
				if (!this.selectionList.length) return this.$message.error('请选择用户')
				ids = this.selectionList.map(function(item, index, array) {
					return item.id
				})
				val["id"] = ids
				val["structure_id"] = val.position_ids
				this.loading = true
				setDeprequest(val)
					.then(res => {
						this.$message.success('设置成功')
						this.usersListFun()
						this.setdepClose()
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 修改角色
			setrole(val) {
				var ids = []
				if (!this.selectionList.length) return this.$message.error('请选择用户')
				ids = this.selectionList.map(function(item, index, array) {
					return item.id
				})
				val["id"] = ids
				this.loading = true

				setRolerequest(val)
					.then(res => {
						this.$message.success('设置成功')
						this.usersListFun()
						this.setroleClose()
						this.loading = false
					})
					.catch(() => {
						this.loading = false
					})
			},

			// 启用/禁用账号
			handleAction(option, user_id) {
				this.$confirm('确认进行此操作？', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						this.loading = true
						let request
						if (option == 'open') {
							request = enables
						} else {
							request = disable
						}
						let ids = {
							id: [user_id]
						}
						request(ids)
							.then(res => {
								this.$message.success('操作成功')
								this.usersListFun()
								this.loading = false
							})
							.catch(() => {
								this.loading = false
							})
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})

			},

			/** 批量操作 */
			selectionBarClick(type) {
				// return console.log(this.selectionList);
				var ids = this.selectionList.map(function(item, index, array) {
					return item.id
				})
				if (type === 'lock' || type === 'unlock') {
					var message = type === 'lock' ? '禁用' : '激活'
					let request
					if (type == 'unlock') {
						request = enables
					} else {
						request = disable
					}
					this.$confirm('这些员工账号将被' + message + ', 是否继续?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							this.loading = true
							request({
									id: ids
								})
								.then(res => {
									this.loading = false
									this.$message.success('修改成功')
									this.usersListFun()
								})
								.catch(() => {
									this.loading = false
								})
						})
						.catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							})
						})
				} else if (type === 'reset') {
					this.resetPasswordVisible = true
				} else if (type === 'setleader') {
					this.getSelectUserList()
					this.setleaderVisible = true
				} else if (type === 'setdep') {
					this.getDepList()
					this.setdepVisible = true
				} else if (type === 'setrole') {
					// 角色列表
					getRoleauthList().then(res => {
						this.optionsList['group_id'].list = res.data
					})
					this.setroleVisible = true
				}

			},

			// 关闭直属上级弹窗
			setleaderClose() {
				this.setleaderVisible = false
				this.postleaderData = {}
			},
			setdepClose() {
				this.setdepVisible = false
				this.postleaderData = {}
			},
			setroleClose() {
				this.setroleVisible = false
				this.postleaderData = {}
			},
			
			// 关联资料
			fieldValueChange(data) {
				if(!data.value.length) return this.formInline["hr_id"] = 0
				this.formInline["hr_id"] = data.value[0].id
			},
			
			/** 勾选操作 */
			handleHandle(data) {
				this.showDview = false
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.employee-dep-management {
		/* padding: 0 20px 20px; */
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.system-content {
		position: relative;
		height: 100%;
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.system-view-nav {
		width: 230px;
		height: 100%;
		overflow: auto;
		margin-right: 10px;
		background: #fff;
		padding-top: 20px;
		border: 1px solid #e6e6e6;
		position: absolute;
		top: 0;
		left: 0;
	}

	.system-view-table {
		background: #fff;
		border: 1px solid #e6e6e6;
		/* flex: 1; */
		position: absolute;
		top: 0;
		left: 240px;
		bottom: 0;
		right: 0;
	}

	.table-top1 {
		padding: 10px 0;
		height: 54px;
		line-height: 54px;
	}

	.status {
		display: inline-block;
		margin-left: 50px;
		font-size: 14px;
	}

	.status>span {
		margin-right: 10px;
	}

	.status-name {
		div {
			display: inline-block;
			width: 6px;
			height: 6px;
			border-radius: 3px;
		}

		// color: $xr-color-primary;
		cursor: pointer;
	}

	/* 详情 */
	.employee-dep-management /deep/ .el-dialog__wrapper {
		margin-top: 60px !important;
	}

	// .employee-dep-management /deep/ .position-flxed-animation {
	//   left: 70%;
	//   height: 100%;
	//   color: red;
	//   margin: 0 !important;
	// }
	.dialog-top>img {
		vertical-align: middle;
		margin-right: 10px;
		height: 36px;
	}

	.dialog-btn-group {
		float: right;
	}

	.dialog-remark {
		font-size: 14px;
		color: #999;
		margin-top: 10px;
	}

	.dialog-content {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #e6e6e6;
	}

	.dialog-content>div {
		padding: 10px 0;
	}

	.dialog-content>div>label {
		color: #777;
		width: 30%;
		display: inline-block;
	}

	/* 新建和编辑 */
	.new-dialog-title {
		padding-left: 10px;
		margin-bottom: 3px;
		border-left: 2px solid #46cdcf;
	}

	.new-dialog-form {
		height: 47vh;
		overflow-y: auto;
		padding: 20px;
	}

	.new-dialog-form /deep/ .el-form-item {
		width: 50%;
		margin: 0;
		padding-bottom: 10px;
	}

	.new-dialog-form /deep/ .el-form-item .el-form-item__label {
		padding: 0;
	}

	.new-dialog-form /deep/ .el-form-item .el-form-item__content {
		width: 70%;
	}

	.nav-dialog-div {
		margin-bottom: 20px;
	}

	.nav-dialog-div /deep/ .el-input {
		width: auto;
	}
	/deep/ .el-tree{
		font-size: 14px;
	}
	/** 树形结构 */
	.el-tree /deep/ .el-tree-node__expand-icon {
		display: none;
	}

	.el-tree /deep/ .el-tree-node__content {
		height: 30px;

		.node-data {
			.node-img {
				width: 15px;
				height: 15px;
				display: block;
				margin-right: 8px;
				margin-left: 24px;
			}

			.node-label {
				margin-right: 8px;
			}

			.node-label-set {
				display: none;
			}
		}

		.node-data:hover .node-label-set {
			display: block;
		}
	}

	.el-tree /deep/ .el-tree-node.is-current>.el-tree-node__content {
		background-color: #ebf3ff;
		border-right: 2px solid #46cdcf;

		.node-label-set {
			display: block;
		}
	}

	.system-view-nav /deep/ .el-tree-node>.el-tree-node__children {
		overflow: visible;
	}

	.system-view-nav /deep/ .el-tree>.el-tree-node {
		min-width: 100%;
		display: inline-block !important;
	}

	/* 搜索框图标按钮 */
	.icon-search .el-icon-search {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40px;
		line-height: 54px;
		text-align: center;
		cursor: pointer;
		font-size: 20px;
		color: #ccc;
	}

	/* 设置flex布局 */
	.flex-index {
		display: flex;
		flex-direction: column;
	}

	/* 设置占位 */
	.flex-box {
		flex: 1;
		border-bottom: 1px solid #e6e6e6;
	}

	/* 搜索框 */
	.icon-search {
		width: 180px;
		position: relative;
	}

	.new-dialog-form /deep/ .el-select {
		display: block;
	}

	/** 分页布局 */
	.p-contianer {
		position: relative;
		background-color: white;
		height: 44px;

		.p-bar {
			float: right;
			margin: 5px 100px 0 0;
			font-size: 14px !important;
		}
	}

	/** 勾选操作 */
	.selection-bar {
		font-size: 12px;
		height: 54px;
		min-height: 54px;
		padding: 0 20px;
		color: #777;

		.selected—title {
			flex-shrink: 0;
			padding-right: 20px;
			border-right: 1px solid #ddd;

			.selected—count {
				color: #ddd;
			}
		}
	}

	.selection-items-box {
		.selection-item {
			width: auto;
			padding: 15px;

			.selection-item-icon {
				display: block;
				margin-right: 5px;
				width: 15px;
				height: 15px;
			}

			.selection-item-name {
				cursor: pointer;
				color: #777;
			}

			.selection-item-name:hover {
				// color: $xr-color-primary;
			}
		}
	}

	.new-dialog-form /deep/ .el-form-item .el-form-item__content .el-select-group__wrap:not(:last-of-type)::after {
		display: none;
	}

	.new-dialog-form /deep/ .el-form-item .el-form-item__content .el-select-group {
		padding-left: 10px;
	}

	.new-dialog-form /deep/ .el-form-item .el-form-item__content .el-select-group__title {
		border-bottom: 1px solid #e4e7ed;
		padding: 0 0 7px;
		margin: 0 20px 5px;
	}

	.status-des {
		font-size: 12px;
		color: #777777;
		margin: 0 5px;
		position: absolute;
		left: 0;
		top: 7px;

		.status-des-item {
			margin: 8px;
			display: inline-block;

			div {
				display: inline-block;
				width: 6px;
				height: 6px;
				border-radius: 3px;
				margin-right: 5px;
			}
		}
	}

	// 提示
	// 提示标志
	.wukong-help_tips {
		color: #999;
		font-size: 14px;
		margin-left: 3px;
		cursor: pointer;
	}

	.wukong-help_tips:hover {
		color: #ddd;
	}

	// 修改密码和修改登录名的样式
	.el-password {
		.el-form-item {
			margin-bottom: 5px;
		}
	}

	.el-dialog__wrapper /deep/.el-dialog__body {
		padding: 20px;
	}

	.tips {
		font-size: 13px;
		color: #999;
	}

	.el-dropdown {
		border: 1px solid #dcdfe6;
		background-color: #fff;
		font-size: 13px;
		color: #777;
		padding: 8px 12px;
		border-radius: 2px;
		height: 31px;
		margin: 0 15px 0 -20px;
		cursor: pointer;
	}

	.parentForm /deep/ {
		.el-form-item__error {
			margin-left: 80px;
		}
	}

	.content-table-header-reminder {
		margin: 0 0 10px 30px;
	}

	.lt {
		float: left;
		margin-left: 30px;
	}

	.rt {
		float: right;
		margin-right: 30px;
	}

	.forminput {
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	.dangan{
		color: rgb(62, 132, 233);
		cursor: pointer;
	}
</style>
